<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>轮播图-淡入淡出</title>
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="author" content="yb">
    <meta name="keywords" content="关键词" />
    <meta name="description" content="描述" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="Expires" content="0">
    <!-- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> -->
    <script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
    <link rel="stylesheet" href="../style/css/base.css">
</head>
<style>
    .xqb_fp_Carousel{
        width: 100%;
        max-width: 1920px;
        min-width: 1200px;
        margin: 0 auto;
    
    }
    /* 轮播图 */
#b2{
    margin: 0;
    height: 450px;
    width: 100%;
    min-width: 1100px;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    overflow: hidden; 
}
#b2 .banner{
    width: 99999px;
    height: 450px;
    position: absolute;
    left: 0;
    top: 0;
}
#b2 .banner li{
    width: 100%;
    min-width: 1100px;
    max-width: 1920px;
    height: 450px;
    /* float: left; */
    position: absolute;
    top: 0;
    left: 0;
}
#b2 .banner a{
    width: 100%;
    display: block;
    height: 450px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1920px auto;
}
#b2 .xqb_fp_regBox{
    width: 1100px;
    margin: 0 auto;
    position: relative;
}
#b2 .xqb_fp_reg{
    width: 300px;
    height: 300px;
    border-radius: 10px;
    position: absolute;
    right: 0;
    bottom: 95px;
    background-color: rgba(0, 0, 0, 0.5);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.xqb_fp_reg .xqb_fp_reg_tt{
    height: 75px;
    line-height: 75px;
    text-align: center;
    font-size: 14px;
    color: #efefef;
}
.xqb_fp_reg .xqb_fp_reg_num{
    width: 183px;
    height: 46px;
    margin: 0 auto;
    margin-bottom: 35px;
    background-image: url('../images/hp_sybfbNum.png');
    background-size: 100%;
    background-repeat: no-repeat;
}
.xqb_fp_reg .xqb_fp_reg_p1{
    height: 26px;
    text-align: center;
    line-height: 26px;
    font-size: 14px;
    color: #f79118;
    margin-bottom: 10px;
}
.xqb_fp_reg .xqb_fp_reg_a{
    width: 220px;
    height: 46px;
    margin: 0 auto;
    margin-bottom: 5px;
}
.xqb_fp_reg .xqb_fp_reg_a>a{
    display: block;
    width: 220px;
    height: 46px;
    margin: 0 auto;
    line-height: 46px;
    text-align: center;
    color: #efefef;
    font-size: 16px;
    background-color: #f79118;
}
.xqb_fp_reg .xqb_fp_reg_p2{
    height: 30px;
    color: #efefef;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
}
.xqb_fp_reg .xqb_fp_reg_p2>a{
    font-size: 14px;
    color: #f79118;
    text-decoration: underline;
}
#b2 .dian{
    width: 100%;
    min-width: 1100px;
    max-width: 1920px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
}
#b2 .dian ul{
    width: 1200px;
    margin: 0 auto;
}
#b2 .dian li{
    float: left;
    width: 216px;
    height: 38px;
    background-color: rgba(0, 0, 0, 0.2); 
    margin-left: 5px;
    cursor: pointer;
    z-index: 9;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); 
    text-align: center;
    color: #ffffff;
    font-size: 14px;
    line-height: 38px;
    letter-spacing: 1px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
#b2 .dian li:first-child{
    margin-left: 0;
}
#b2 .dian li.xqblun_active{
     background-color: rgba(0, 0, 0, 0.4); 
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); 
}
</style>
<body>
    <div class="xqb_fp_Carousel">
        <!-- banner -->
        <div id="b2">
            <ul class="banner fixed">
                <li>
                    <a href="javascript:;" style="background-image:url('https://xqbstyle.oss-cn-hangzhou.aliyuncs.com/Promote/ChungYeung/images/pc_banner.png')"></a>
                </li>
                <li>
                    <a href="javascript:;" style="background-image:url('https://xqbstyle.oss-cn-hangzhou.aliyuncs.com/Promote/dataReport/dr201709/images/dataReport_banner.png')"></a>
                </li>
                <li>
                    <a href="javascript:;" style="background-image:url('https://xqbstyle.oss-cn-hangzhou.aliyuncs.com/sateBacked/images/pc_gz_banner.png')"></a>
                </li>
                <li>
                    <a href="javascript:;" style="background-image:url('https://xqbstyle.oss-cn-hangzhou.aliyuncs.com/index/images/banner1.png')"></a>
                </li>
                <li>
                    <a href="javascript:;" style="background-image:url('https://xqbstyle.oss-cn-hangzhou.aliyuncs.com/index/images/safe_guarantee.png')"></a>
                </li>
            </ul>
            <div class="dian">
                <ul class="fixed">
                    <li>重阳回馈</li>
                    <li>运营报告</li>
                    <li>国有背景</li>
                    <li>新手红包</li>
                    <li>安全保障</li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script>
    // banner 轮播

$(document).ready(function () {
    var listLen = $('#b2 .banner li').length;
    // 给 .dian li 调整样式
    var dianLiw;
    var dianPadL;
    if(listLen > 5){
        dianPadL = 0;
        dianLiw = (1100 - (listLen-1)*5)/listLen;
        dianStyle();
    }else{
        dianPadL = (1100 - 216 * listLen - 5 * (listLen - 1))/2;
        dianLiw = 216;
        dianStyle();
    }
    function dianStyle(){
        $('#b2 .dian ul li').css({
            width: dianLiw
        })
        $('#b2 .dian ul').css({
            paddingLeft: dianPadL
        })
    }

    var width;
    var lisWidth;
    
    lisWidth = $(window).width();
    if (lisWidth > 1920) {
        width = 1920;
    } else if (lisWidth > 1100) {
        $('#b2 .banner li').css({
            width: lisWidth
        });
        width = lisWidth;
    } else {
        $('#b2 .banner li').css({
            width: 1100
        });
        width = 1100;
    }

    var showWidth = function () {
        lisWidth = $(window).width();
        if (lisWidth > 1920) {
            width = 1920;
        } else if (lisWidth > 1100) {
            $('#b2 .banner li').css({
                width: lisWidth
            });
            width = lisWidth;
        } else {
            $('#b2 .banner li').css({
                width: 1100
            });
            width = 1100;
        }
    }

    $('#b2 .dian li').eq(0).addClass('xqblun_active');
    var bannerN = 0;

    function nextBan() {
        bannerN = bannerN >= listLen - 1 ? 0 : bannerN + 1;
        showBan();
    }

    function prevBan() {
        bannerN = bannerN <= 0 ? listLen - 1 : bannerN - 1;
        showBan();
    }

    function showBan() {
        $('#b2 .banner li').eq(bannerN).css('z-index',9).siblings().css('z-index',2);
        $('#b2 .banner li').stop().animate({
            opacity: 0
        })
        $('#b2 .banner li').eq(bannerN).stop().animate({
            opacity: 1
        }, 500);
        $('#b2 .dian li').eq(bannerN).addClass('xqblun_active').siblings().removeClass('xqblun_active');
    }

    // 自动切换
    var lb = setInterval(function () {
        nextBan();
    }, 5000)

    $('#b2').hover(function () {
        clearInterval(lb);
        $('#b2 .dian li').hover(function () {
            var lisIndex = $(this).index();
            bannerN = lisIndex;
            showBan();
        })
    }, function () {
        lb = setInterval(function () {
            nextBan();
        }, 5000)
    })

    // 窗口变动
    $(window).resize(function () {
        showWidth();
        var banL = -bannerN * width;

        $('#b2 .banner').css('left', banL);
    });

    // 公告
    var zxggN = 0;

    function nextGG() {
        zxggN = zxggN == $('.zxgg_con01_c ul li').length - 1 ? 0 : zxggN + 1;
        carouselGG();
    }

    function prevGG() {
        zxggN = zxggN == 0 ? $('.zxgg_con01_c ul li').length - 1 : zxggN - 1;
        carouselGG();
    }

    function carouselGG() {
        var poTop1 = -(($('.zxgg_con01_c ul li').outerHeight(true)) * zxggN);
        $('.zxgg_con01_c ul').stop().animate({
            top: poTop1
        }, 300);
    }
    var zxgglb = setInterval(nextGG, 5000);

    // 上浮效果
    $('.xqb_fp_con_dqly>ul>li').hover(function(){
        $(this).stop().animate({
            top: -2
        },300)
    },function(){
        $(this).stop().animate({
            top: 0
        },300)
    })
    // $('.xqb_fp_con_zqzr>ul>li').hover(function(){
    //     $(this).stop().animate({
    //         top: -2
    //     },200)
    // },function(){
    //     $(this).stop().animate({
    //         top: 0
    //     },200)
    // })

})
</script>
</html>